<template>
    <div class="user-center-container">
        <a-layout id="components-layout-demo-top-side">
            <a-layout-header>
                <my-header></my-header>
            </a-layout-header>
            <div class="create-container">
                <a-layout-content>
                    <a-layout style="padding: 24px 0;background: #fff">

                        <a-layout-sider class="create-container-slider" width="200" style="background: #fff">
                            <div>
                                <a-menu
                                        style="width: 200px"
                                        :default-selected-keys="['1']"
                                        mode="inline"
                                        :theme="theme"
                                        :selected-keys="[current]"
                                        @click="handleClick"
                                >
                                    <a-menu-item key="1">
                                        <router-link to="/userCenter/personalInformation"></router-link>
                                        个人资料
                                    </a-menu-item>
                                    <a-menu-item key="2">
                                        <router-link to="/userCenter/myCollection"></router-link>
                                        我的收藏
                                    </a-menu-item>
                                    <a-menu-item key=3>
                                        <router-link to="/userCenter/peopleIFollow"></router-link>
                                        我关注的人
                                    </a-menu-item>
                                    <a-menu-item key="4">
                                        <router-link to="/userCenter/myFans"></router-link>
                                        我的粉丝
                                    </a-menu-item>
                                    <a-menu-item key="5">
                                        <router-link to="/userCenter/myTags"></router-link>
                                        我的标签
                                    </a-menu-item>
                                    <a-menu-item key="6">
                                        <router-link to="/userCenter/myBlogs"></router-link>
                                        我的博客
                                    </a-menu-item>
                                    <a-menu-item key="7">
                                        <router-link to="/userCenter/myDownloads"></router-link>
                                        我的下载
                                    </a-menu-item>
                                    <a-menu-item key="8">
                                        <router-link to="/userCenter/myForum"></router-link>
                                        我的论坛
                                    </a-menu-item>
                                    <a-menu-item key="9">
                                        <router-link to="/userCenter/myAnswerQuestion"></router-link>
                                        我的问答
                                    </a-menu-item>
                                </a-menu>
                            </div>

                        </a-layout-sider>
                        <a-layout-content :style="{ padding: '0 24px', minHeight: '280px' }">
                            <router-view></router-view>
                        </a-layout-content>
                    </a-layout>
                </a-layout-content>
                <a-layout-footer style="text-align: center">
                    赣ICP备20000449号-3 | dscn created @2020 05
                </a-layout-footer>
            </div>
        </a-layout>
    </div>
</template>

<script>
    import MyHeader from "@/views/home/components/header/index";

    export default {
        name: "index",
        components: {MyHeader},
        data() {
            return {
                current: '1',
                theme: 'light',
            };
        },
        methods: {
            handleClick(e) {
                console.log('click ', e);
                this.current = e.key;
            }
        },
    }
</script>

<style scoped>
    .ant-menu-submenu-title {
        padding: 0;
        margin: 0;
    }

    .sub-menu-one {
        border-top: darkgrey 1px solid;
        margin-top: 5px;
        margin-left: 0;
        text-align: center;
    }

    .sub-menu-two, .sub-menu-three, .sub-menu-four, .sub-menu-five {
        border-top: darkgrey 1px solid;
        text-align: center;
        margin: 0;
        padding: 0;
    }

    #components-layout-demo-top-side .logo {
        width: 120px;
        height: 31px;
        background: rgba(255, 255, 255, 0.2);
        margin: 16px 28px 16px 0;
        float: left;
    }

    .create-container {
        width: 1200px;
        margin: 65px auto 0 auto;
        /*width: 100%;*/
        /*margin-left: 320px;*/
        /*float: left;*/
    }

    .create-container-slider {
        text-align: center;
    }

</style>